<template>
	<view class="table">
		<view class="header">
			<view>绑定奖励</view>
		</view>
		<view class="table-main">
			<view class="more">
				<view class="top">
					<view class="base-name bottom-none-border">被邀请家长注册</view>
					<view class="base-name  bottom-none-border">奖励</view>
					<view class="base-name  bottom-none-border">价值</view>
				</view>
				<view class="bottom">
					
				</view>
			</view>
			<view class="col">
				<view class="base-name bottom-none-border">一个月</view>
				<view class="base-name dranger bottom-none-border">2天vip</view>
				<view class="base-name dranger right-none-border">≈2元</view>
			</view>
			<view class="col">
				<view class="base-name bottom-none-border">半年</view>
				<view class="base-name dranger bottom-none-border">2天vip</view>
				<view class="base-name dranger right-none-border">≈2元</view>
			</view>
			<view class="col">
				<view class="base-name bottom-none-border">一年</view>
				<view class="base-name dranger bottom-none-border">2天vip</view>
				<view class="base-name dranger right-none-border">≈2元</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style scoped lang="scss">
	.table{
		width: calc(100% - 20upx);
		min-height: 240upx;
		border-radius: 8upx;
		border: 1px solid #B3F1D7;
		.header{
			width: 100%;
			height: 76upx;
			line-height: 76upx;
			background: #D6FDED;
			text-align: center;
			font-size: 28upx;
			font-weight: 600;
		}
		.dranger{
			font-weight: 500;
			font-size: 24upx;
			color: #F7AD55;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
		
		.table-main{
			// display: flex;
			// align-items: flex-start;
			width: 100%;
			height: 100%;
			.col{
				width: 100%;
				display: flex;
				flex-shrink: 0;
				flex-wrap: nowrap;
				.base-name{
				  flex-grow: 1;    /* 让所有子元素平分空间 */  
				   flex-basis: 0;
				   min-width: 0;
					text-align: center;
					border-right:2upx solid #B3F1D7 ;
					border-bottom:2upx solid #B3F1D7 ;
					border-top:2upx solid #B3F1D7 ;
					height: 82upx;
					line-height: 82upx;
					&:first-child{
						// border-top: none;
					}
					&:last-child{
						border-bottom: none;
					}
				}
				.bottom-none-border{
					border-bottom: none;
				}
				.right-none-border{
					border-right: none;
				}
			}
			.more{
				display: flex;
				flex-shrink: 0;
				flex-wrap: nowrap;
				flex-direction: column;
				width: 100%;
				height: calc(100% - 76upx);
				.base-name{
					 flex-grow: 1;    /* 让所有子元素平分空间 */  
				   flex-basis: 0;
				   min-width: 0;
					text-align: center;
					border-right:2upx solid #B3F1D7 ;
						border-bottom:2upx solid #B3F1D7 ;
					  height: 82upx;
					  line-height: 82upx;
				}
				.base-value{
					flex-grow: 1;    /* 让所有子元素平分空间 */
					flex-basis: 0;
					min-width: 0;
					text-align: center;
					border-right:2upx solid #B3F1D7 ;
					  height: 82upx;
					  line-height: 82upx;
				}
				.bottom-none-border{
					border-bottom: none;
				}
				
				.top{
					min-width: 100%;
					display: flex;
					.base-name{
						&:last-child{
							border-right: none;
						}
					}
				}
				.bottom{
					width: 100%;
					display: flex;
					.base-value{
						&:last-child{
							border-right: none;
						}
					}
				}
			}
		}
	}
</style>

